<!-- 学生表格 -->
<div class="table-responsive"  id="students-table" style="display:none;">
  <h3 class="mb-0">学生管理</h3>
  <!-- 添加学生按钮 -->
  <button data-toggle="modal" data-target="#add-student-modal" class="btn btn-primary">添加学生</button>
  <!-- 查询学生输入框及按钮 -->
  <div class="search-student" style="display: inline-flex; align-items: stretch; margin-left: 15px;">
    <input id="search-student-input" class="form-control" type="text" placeholder="查询学生" aria-label="Search" style="width: 250px;">
    <button class="btn btn-outline-secondary" type="button" id="search-student-btn">
      <i class="fa fa-search"></i>
    </button>
  </div>

  <!-- 省略实际表格内容；可根据需求填充表格 -->
  <table class="table table-bordered table-hover" >
    <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>专业</th>
      <th>身份证号</th>
      <th>地址</th>
      <th>身体状况</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="students-tbody">
    <!-- 使用 JavaScript 动态填充学生数据 -->
    </tbody>
  </table>
</div>
<!--增加学生模拟框-->
<div class="modal fade" id="add-student-modal" tabindex="-1" role="dialog" aria-labelledby="add-student-modal-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-student-modal-label">添加学生</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="add-student-from">
          <div class="form-group">
            <label for="student-name">姓名</label>
            <input type="text" class="form-control" id="student-name" placeholder="请输入学生的姓名">
          </div>
          <div class="form-group">
            <label for="student-sex" >性别</label>
            <select class="form-control" id="student-sex">
              <option selected>选择性别</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div class="form-group">
            <label for="student-age">年龄</label>
            <input type="number" class="form-control" id="student-age" placeholder="请输入学生的年龄">
          </div>
          <div class="form-group">
            <label for="student-major">专业</label>
            <input type="text" class="form-control" id="student-major" placeholder="请输入学生的专业">
          </div>
          <div class="form-group">
            <label for="student-code">身份证号</label>
            <input type="text" class="form-control" id="student-code" placeholder="请输入学生的身份证号">
          </div>
          <div class="form-group">
            <label for="student-code">住址</label>
            <input type="text" class="form-control" id="student-address" placeholder="请输入学生的住址">
          </div>
          <div class="form-group">
            <label for="student-status">身体状况</label>
            <select class="form-control" id="student-status">
              <option selected>选择状况</option>
              <option value="健康">健康</option>
              <option value="良好">良好</option>
              <option value="一般">一般</option>
              <option value="差">差</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="add-student-btn">添加学生</button>
      </div>
    </div>
  </div>
</div>

<!-- 弹出窗口 - 查询结果 -->
<div class="modal fade" id="studentSearchResultModal" tabindex="-1" aria-labelledby="studentSearchResultLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="studentSearchResultLabel">查询结果</h5>
      </div>
      <div class="modal-body">
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <th>头像</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
            <th>身份证号</th>
            <th>住址</th>
            <th>身体状况</th>
          </tr>
          </thead>
          <tbody id="searchResult">
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 编辑模拟框 -->
<div class="modal fade" id="editStudentModal" tabindex="-1" role="dialog" aria-labelledby="editStudentModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editStudentModalLabel">编辑学生信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <input type="hidden" id="edit-student-id"/>
          <div class="form-group">
            <label for="edit-student-name">姓名</label>
            <input type="text" class="form-control" id="edit-student-name" placeholder="输入姓名">
          </div>
          <div class="form-group">
            <label for="edit-student-sex">性别</label>
            <select class="form-control" id="edit-student-sex">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div class="form-group">
            <label for="edit-student-age">年龄</label>
            <input type="number" class="form-control" id="edit-student-age" placeholder="输入年龄">
          </div>
          <div class="form-group">
            <label for="edit-student-major">专业</label>
            <input type="text" class="form-control" id="edit-student-major" placeholder="输入专业">
          </div>
          <div class="form-group">
            <label for="edit-student-code">学号</label>
            <input type="text" class="form-control" id="edit-student-code" placeholder="输入学号">
          </div>
          <div class="form-group">
            <label for="edit-student-address">地址</label>
            <input type="text" class="form-control" id="edit-student-address" placeholder="输入地址">
          </div>
          <div class="form-group">
            <label for="edit-student-status">健康状况</label>
            <select class="form-control" id="edit-student-status">
              <option value="健康">健康</option>
              <option value="良好">良好</option>
              <option value="一般">一般</option>
              <option value="差">差</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="saveChangesBtn">保存更改</button>
      </div>
    </div>
  </div>
</div>

